<template>
  <div class="mvPage">
    <div class="currentPage">
      <!-- mv 分类 -->
      <div class="categoryMvContainer">
        <dl class="categoryMv">
          <dt class="cateHeader">区域</dt>
          <dd
            class="cateitem"
            @click="getMvByCate('areaCheck', index)"
            :class="areaCheck === index ? 'active' : ''"
            v-for="(a, index) in area"
            :key="index"
          >
            {{ a }}
          </dd>
        </dl>
        <dl class="categoryMv">
          <dt class="cateHeader">类型</dt>
          <dd
            class="cateitem"
            @click="getMvByCate('typeCheck', index)"
            :class="typeCheck === index ? 'active' : ''"
            v-for="(t, index) in type"
            :key="index"
          >
            {{ t }}
          </dd>
        </dl>
      </div>
      <!-- mv列表 -->
      <div class="MvContent">
        <!-- 列表头部 -->
        <div class="MvHeader">
          <div class="title">全部MV</div>
          <ul class="headerCate">
            <li
              class="headerCateItem"
              @click="getMvByCate('orderCheck', index)"
              :class="orderCheck === index ? 'active' : ''"
              v-for="(t, index) in order"
              :key="index"
            >
              {{ t }}
            </li>
          </ul>
        </div>
        <!-- 列表内容 -->
        <div class="mvlistcontanier">
          <ul ref="mvList" class="mvLsit">
            <MvShow
              :width="'20%'"
              v-for="mvItem in mvList"
              :key="mvItem.id"
              :mvItem="mvItem"
              @toArtist="toArtist(mvItem.artistId)"
              @toPlay="toPlay"
            />
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { reqGetAllMv, reqGetMvByCate } from "../../api/mv";
  import MvShow from "../../components/MvShow";
  // import Loading from "../../components/Loading.vue";

  export default {
    name: "MvList",
    data() {
      return {
        mvList: [],
        area: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
        type: ["全部", "官方版", "原生", "现场版", "网易出品"],
        order: ["上升最快", "热门", "最新"],
        areaCheck: 0,
        typeCheck: 0,
        orderCheck: 0,
        offset: 0,
      };
    },
    methods: {
      // 去播放
      toPlay(id) {
        this.$router.push({
          name: "MvPlay",
          query: {
            id,
          },
        });
      },
      // 去作者页面
      toArtist(id) {
        this.$router.push({
          path: "/singer",
          query: {
            id,
          },
        });
      },
      // 去按分类获取mv
      async getMvByCate(cate, index) {
        this[cate] = index;
        this.offset = 0;
        const data = await this.sendRequst();
        console.log(data);
        this.mvList = data;
      },
      // 发送请求
      async sendRequst() {
        const {
          offset,
          areaCheck,
          typeCheck,
          orderCheck,
          area,
          type,
          order,
        } = this;
        // this.loading = true;
        const res = await reqGetMvByCate(
          area[areaCheck],
          type[typeCheck],
          order[orderCheck],
          offset
        );
        // this.loading = false;
        return res.data;
      },
      //无限下拉
      awaysScroll() {
        let bottom = null;
        let isfinish = null;
        const height = document.documentElement.clientHeight;
        window.onscroll = async () => {
          bottom = this.$refs.mvList.getBoundingClientRect().bottom;
          if (bottom <= height + 20) {
            if (isfinish) {
              // console.log("没加载完成");
              return;
            }
            this.offset += 30;
            isfinish = true;
            // console.log("加载中", bottom);
            const res = await this.sendRequst();
            // console.log(res);
            this.mvList = this.mvList.concat(res);
            isfinish = false;
          }
        };
      },
     /*  async load() {
        this.offset += 30;
        const res = await this.sendRequst();
        this.mvList = this.mvList.concat(res);
      }, */
    },
    async mounted() {
      // this.loading = true;
      const mvList = await reqGetAllMv();
      // this.loading = false;
      this.mvList = mvList.data;
       this.awaysScroll();
    },
    beforeDestroy() {
      window.onscroll = "";
    },
    components: {
      MvShow,
      // Loading,
    },
  };

  // MvShow;
</script>

<style lang="less" scoped>
  // 整体样式
  .mvPage {
    width: 1200px;
    margin: 0 auto;
    min-width: 1200px;
    margin-top: 102px;
    z-index: 0;
  }
  p {
    margin: 0;
  }
  dl,
  dt,
  ul,
  li,
  dd {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  // mv 分类开始
  .categoryMvContainer {
    display: flex;
    flex-direction: column;
    .categoryMv {
      display: flex;
      padding-bottom: 20px;
    }
    .cateHeader {
      font-size: 14px;
      font-weight: bold;
      width: 65px;
      height: 30px;
      line-height: 30px;
      text-align: left;
    }
    .cateitem {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      margin-right: 15px;
      border-radius: 5px;
      cursor: pointer;
      &.active {
        background-color: #ff641e;
        color: white;
      }
    }
  }
  // mv分类结束
  // mv列表开始
  .mvlistcontanier {
    position: relative;
  }
  .MvContent {
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    .MvHeader {
      display: flex;
      padding: 15px 0;
      .title {
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 24px;
        color: #333333;
      }
      .headerCate {
        padding: 5px 40px;
        display: flex;
        .headerCateItem {
          cursor: pointer;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #333333;
          margin-right: 34px;
          position: relative;
          &.active {
            color: #000000;
            font-weight: bold;
          }
          &.active::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 6px;
            bottom: 0px;
            left: 0px;
            background-color: #ff641e;
            z-index: -1;
          }
        }
      }
    }

    .mvLsit {
      display: flex;
      // overflow: auto;
      // height: auto;
      flex-wrap: wrap;
    }
  }
  // mv列表结束
</style>
